<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- crossorigin="anonymous" 即向源发送请求时不携带cookie -->
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script
      crossorigin="anonymous"
      src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"
    ></script>
  </head>
  <body>
    <div class="container">
      <h2>axios发送Ajax请求</h2>
      <button class="btn btn-primary">Get请求</button>
      <button class="btn btn-danger">Post请求</button>
      <button class="btn btn-info">通用型方法ajax</button>
    </div>
  </body>

  <script>
    axios.defaults.baseURL = "http://127.0.0.1:9000";
    $("button")
      .eq(0)
      .click(function () {
        axios
          .get("/server2", {
            params: { a: 10, b: 20 }, //参数
            headers: { h1: 10, h2: 20 },
          })
          .then((value) => {
            console.log(value);
          });
      });

    $("button")
      .eq(1)
      .click(function () {
        axios.post(
          "/server2",
          { name: "xxx" }, //数据
          {
            //headers: { h1: 10, h2: 20 },
          }
        );
      });

    $("button")
      .eq(2)
      .click(function () {
        axios({
          method: "post", //请求方法
          url: "/server2", //url
          params: { a: 10, b: 20 }, //url查询参数
          headers: {}, //请求头
          data: {}, //请求体 --提交的数据
        });
      });
  </script>
</html>
